<html>
<head>
<title>Belajar CRUD - Jquery easy UI</title>
<link rel='stylesheet' type='text/css'
	href='../jeasyui_lib/themes/default/easyui.css'>
<link rel='stylesheet' type='text/css'
	href='../jeasyui_lib/themes/icon.css'>
<script type="text/javascript" src='../jeasyui_lib/jquery-1.7.1.min.js'></script>
<script type="text/javascript" src='../jeasyui_lib/jquery.easyui.min.js'></script>
<script type="text/javascript">
var url;

function newUser(){
	$('#dlg').dialog('open').dialog('setTitle','Tambah User Baru');
	$('#fm').form('clear');
	url = 'save_agen.php';
}

function editUser(){
	var row = $('#dg').datagrid('getSelected');
	if (row){
		$('#dlg').dialog('open').dialog('setTitle','Edit Agen');
		$('#fm').form('load',row);
		url = 'update_agen.php?id='+row.hp;
	}
}

function removeUser(){
    var row = $('#dg').datagrid('getSelected');
    if(row){
        $.messager.confirm('Confirm','Apakah data ini akan dihapus?',function(r){
            if(r){
                $.post('remove_agen.php',{hp: row.hp},function(result){
                    if(result.success){
                        $('#dg').datagrid('reload');
                     } else {
                         $.messager.show({title: 'Error',msg: result.msg});
                     }
                },'json');
            }
        });
    }
}

function saveUser(){
	$('#fm').form('submit',{
		url: url,
		onSubmit: function(){
			return $(this).form('validate');
		},
		success: function(result){
			var result = eval('('+result+')');
			if (result.success){
				$('#dlg').dialog('close');
				$('#dg').datagrid('reload');
			}else{
				$.messager.show({
					title: 'Error',
					msg: result.msg
				});
			}
		}
	});
}

</script>
</head>
<body>
	<table id="dg" title="Daftar Agen" class="easyui-datagrid"
		style="width: 550px; height: 250px" url="get_agen.php"
		toolbar="#toolbar" rownumbers="true" fitColumns="true"
		singleSelect="true">
		<thead>
			<tr>
				<th field="hp" width="50">Hp</th>
				<th field="nama" width="50">Nama</th>
				<th field="kelompok" width="50">Kelompok</th>
		</thead>
	</table>
	<div id='toolbar'>
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
			onclick="newUser()">New User</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
			onclick="editUser()">Edit User</a>
		<a href="#"	class="easyui-linkbutton" iconCls="icon-remove" plain="true"
			onclick="removeUser()">Remove User</a>
	</div>
	<div id="dlg" class="easyui-dialog"
		style="width: 400px; height: 280px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons">
		<div class="ftitle">User Information</div>
		<form id="fm" method="post">
			<div class="fitem">
				<label>HP:</label> <input name="hp" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem">
				<label>Nama:</label> <input name="nama" class="easyui-validatebox"
					required="true">
			</div>
			<div class="fitem">
				<label>Kelompok:</label> <input name="kelompok" required="true"
					class="easyui-validatebox">
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
			onclick="saveUser()">Save</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
	</div>
</body>
</html>